<template>
	<view v-show="activeIndex == 1">
		<view class="bookings">
			<view class="evaluate">
				<view class="all-comments">
					<text class="all">全部</text>
					<text class="comments">有图(10)</text>
					<text class="comments">文字(436)</text>
					<text class="comments">好评(318)</text>
					<text class="comments">差评(8)</text>
				</view>
			</view>
			<view class="user-evaluate" v-for="(item,index) in userEvaluate" :key="index">
				<view class="user-name">
					<view class="user-name-top">
						<image :src="item.userImg" mode=""></image>
						<text class="users">{{item.users}}</text>
						<u-rate  count="count" v-model="value" color="#E6E6E6" name="star-fill" active-color="#FFB600" inactive-color="#b2b2b2" gutter="20"></u-rate>
					</view>
					<text class="data">{{item.data}}</text>
				</view>
				<view class="user-text">
					{{item.text}}
				</view>
				<view class="user-evaluate-img">
					<view class="user-img" v-for="(ite,inde) in item.usersImg" :key="inde">
						<image :src="ite.img" mode=""></image>
					</view>
				</view>
				<view class="review">
					<view class="review-user">
						用户2天后追评
					</view>
					<view class="review-user-name">
						{{item.reviewName}}
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			activeIndex: {
				type: Number,
				default: () => ({})
			}
		},
		data() {
			return {
				count: 5,
				value: 5,
				userEvaluate:[
					{
						userImg:"/static/smile.png",
						users:"用户昵称",
						data:"2020.08.02",
						text:"确实是纯棉的，看着也很好，摸着很柔软。纯棉材质，按扣开裆连体方便更换纸尿裤，图案可爱宝宝穿它萌萌哒",
						review:"用户2天后追评",
						reviewName:"买来送朋友宝宝穿的，居然浮毛褪色，价格不算便宜的，婴儿穿的，怎么可以用掉色掉毛的布料！！",
						usersImg:[
							{img:"/static/index/list-img_03.gif"},
							{img:"/static/index/list-img_03.gif"},
							{img:"/static/index/list-img_03.gif"}
						]
						
					
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.bookings{
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		
		.evaluate{
			padding: 0 25rpx;
			
			.all-comments{
				width: 100%;
				margin-bottom:56rpx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;		
				
				.all{
					padding:14rpx 17rpx;
					background:rgba(255,242,244,1);
					border:1rpx solid rgba(240,29,49,1);
					border-radius:30rpx;
					font-size:24rpx;
					font-family:PingFang;
					font-weight:500;
					color:rgba(240,29,49,1);
				}
				.comments{
					padding: 12rpx 21rpx;
					background:rgba(245,245,245,1);
					border-radius:30rpx;
					font-size:24rpx;
					font-family:PingFang;
					font-weight:500;
					color:rgba(51,51,51,1);
				}
			}
		}
		.user-evaluate{
			padding:0 25rpx;
			margin-bottom:68rpx;
			height: 100%;
			
			.user-name{
				width: 100%;
				display: flex;
				align-items: flex-end;
				
				justify-content: space-between;
				
				.user-name-top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					 
					image{
						width:56rpx;
						height: 56rpx;						
					}
					.users{
						margin: 0 21rpx;
						font-size:28rpx;
						font-family:PingFang;
						font-weight:bold;
						color:rgba(41,41,41,1);
					}
				}
				.data{
					font-size:20rpx;
					line-height: 48rpx;
					font-family:PingFang;
					font-weight:400;
					color:rgba(128,128,128,1);
				}
			}
			.user-text{
				margin-top: 29rpx;
				font-size:26rpx;
				font-family:PingFang;
				font-weight:500;
				color:rgba(41,41,41,1);
				line-height:40rpx;
			}
			.user-evaluate-img{
				width: 100%;
				margin-top: 23rpx;
				display: flex;
				align-items: flex-end;
				flex-wrap: wrap;
				justify-content: space-between;
				
				.user-img{
					width:33%;
					height:226rpx;
					overflow: hidden;
					margin-bottom: 10rpx;
					
					image{
						width: 100%;
						height: 100%;
						display: block;
					}
				}
			}
			.review{
				width: 100%;
				height: auto;
				margin-top:24rpx;
				
				.review-user{
					font-size:24rpx;
					font-family:PingFang;
					font-weight:500;
					color:rgba(245,87,105,1);
				}
				.review-user-name{
					font-size:26rpx;
					margin-top:28rpx;
					font-family:PingFang;
					font-weight:500;
					color:rgba(41,41,41,1);
					line-height:40rpx;
				}
			}
		}
	}
</style>
